<template>
  <div class="pay">
    <van-cell-group>
      <!-- 顶部课程信息 -->
      <van-cell class="course-info">
        <img :src="course.courseImgUrl" alt="">
        <div class="price-info">
            <div class="course-name">{{ course.courseName }}</div>
            <div class="discount">￥{{ course.discounts }}</div>
        </div>
      </van-cell>
      <!-- 用户信息 -->
      <van-cell class="account-info">
        <div>购买信息</div>
        <div class="account-description">购买后使用此账号登录【拉勾教育】学习</div>
        <div class="username">当前帐号: {{ username }}</div>
      </van-cell>
       <!-- 支付方式 -->
      <van-cell class="pay-away">
        <div class="title">
          <p>支付方式</p>
          <van-radio-group v-model="radio">
            <van-cell-group>
              <!-- 微信支付方式 -->
              <van-cell @click="radio = '1'">
              <template #right-icon>
                <van-radio name="1" />
              </template>
              <template #title>
               <img src="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png" alt="">
               <span>微信支付</span>
              </template>
              </van-cell>
              <!-- 支付宝支付方式 -->
              <van-cell @click="radio = '2'">
              <template #title>
               <img src="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png" alt="">
               <span>支付宝支付</span>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
        <van-button @click="handlePay">￥{{ course.discounts }} 立即支付</van-button>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { Cell, CellGroup, RadioGroup, Radio, Toast } from 'vant'
import { getCourseById } from '@/services/course'
// import { createOrder, getPayInfo } from '@/services/pay'
import { createOrder, initPayment, getPayResult } from '@/services/pay'
export default {
  name: 'Pay',
  components: {
    VanCell: Cell,
    VanCellGroup: CellGroup,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio
  },
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      // 课程信息
      course: {},
      radio: '1',
      // 订单号
      orderNumber: null
    }
  },
  created () {
    // 课程信息
    this.loadCourseById()
    // 获取订单号
    this.loadOrder()
  },
  methods: {
    async loadCourseById () {
      const { data } = await getCourseById({
        courseId: this.courseId
      })
      // console.log(data)
      this.course = data.content
    },
    // 创建订单获取订单号
    async loadOrder () {
      const { data } = await createOrder({
        goodsId: this.courseId
      })
      // console.log(data)
      this.orderNumber = data.content.orderNo
      // 获取支付信息
    //   const { data: payInfo } = await getPayInfo({
    //     shopOrderNo: this.orderNumber
    //   })
    //   console.log(payInfo) window.localtion.herf = dat
    },
    async handlePay () {
      const { data } = await initPayment({
        goodsOrderNo: this.orderNumber,
        channel: this.radio === '1' ? 'weChat' : 'aliPay',
        returnUrl: 'http://edufront.lagounews.com/'
      })
      // console.log(data)
      // 接收响应地址，并进行跳转
      // window.location.href = data.content.payUrl
      const timer = setInterval(async () => {
        const { data: payResult } = await getPayResult({
          orderNumber: data.content.orderNo
        })
        // console.log(payResult)
        if (payResult.content && payResult.content.status === 2) {
          clearInterval(timer)
          Toast.success('购买成功')
          this.$router.push({
            name: 'learn'
          })
        }
      }, 1000)
    }
  },
  // 计算属性
  computed: {
    username () {
      return this.$store.state.user.organization.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
  }
}
</script>

<style lang="scss" scoped>
// 顶部课程信息样式
.pay{
  position: absolute;
  height: 100%;
  width: 100%;
}
.van-cell-group{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.course-info{
  height: 170px;
  padding: 40px 20px 0;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.course-info img{
  width: 80px;
  height: 107px;
  border-radius: 10px;
}
.course-info .price-info{
  display: flex;
  flex-direction: column;
}
.course-info .van-cell__value{
  display: flex;
}
.course-info .price-info{
  height: 107px;
  padding: 5px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.price-info .discount{
  font-size: 20px;
  font-weight: 600;
  color: #ff7452
}
.price-info .course-name{
  font-size: 18px;
  font-weight: 600;
}
// 支付信息的样式
.account-info{
  height: 120px;
  margin-bottom: 10px;
}
.account-info .account-description{
  font-size: 12px;
  color: #999;
}
.account-info .username{
    margin:20px 0px 10px;
    font-size: 18px;
    font-weight: 700;
}
// 支付方式样式
.pay-away{
  flex: 1;
}
.pay-away .van-cell{
 padding: 20px 10px;
}
.pay-away .van-cell__value{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pay-away .van-cell__title{
  display: flex;
  align-items: center;
}
.pay-away .van-cell img{
  width: 28px;
  height: 28px;
}
.pay-away .van-cell span{
  font-size: 16px;
  margin-left: 10px;
}
::v-deep .van-radio__icon--checked .van-icon{
  background-color: #fbc546;
  border-color: #fbc546;
}
// 底部按钮样式
::v-deep .pay-away .van-button{
  background: linear-gradient(270deg,#faa83e,#fbc546);
  border-radius: 20px;
  font-size: 18px;
}
</style>
